<template>
	<view>
		<view class="head">
			<image src="../../../static/banner.png" mode="widthFix" class="shop-banner"></image>
			<view class="shop-info-area">
				<view class="shop-info">
					<view class="shop-name" style="margin-bottom: 20upx;">
						{{shop.name}}
					</view>
					<view class="row" style="margin-bottom: 20upx;">
						<image src="../../../static/clock-grey.png" mode="widthFix" style="width: 22upx;margin-right: 10upx;"></image>
						<view class="shop-time">
							{{shop.work_start}} - {{shop.work_end}}
						</view>
						<view class="shop-count">
							{{shop.service_count}}人到店
						</view>
					</view>
					<view class="row" style="margin-bottom: 20upx;">
						<image src="../../../static/location-grey.png" mode="widthFix" style="width: 22upx;margin-right: 10upx;"></image>
						<view class="shop-location">
							{{shop.address}}
						</view>
						<view class="shop-distance">
							距您{{shop.distance}}km 
						</view>
					</view>
					<view class="shop-score">
						<view class="shop-environment">
							<view class="shop-score-number">
								{{shop.environment_score}}
							</view>
							<view class="shop-score-detail">
								<view class="shop-score-label">
									门店环境
								</view>
								<view class="shop-score-star">
									<block v-for="i in 5" :key="i">
										<image src="../../../static/star.png" mode="" style="width: 24upx;height: 24upx;" v-if="i<=shop.environment_score-1"></image>
										<image src="../../../static/star-line.png" mode="" style="width: 24upx;height: 24upx;" v-else></image>
									</block>
								</view>
							</view>
						</view>
						<view style="width: 30upx;"></view>
						<view class="shop-service">
							<view class="shop-score-number">
								{{shop.service_score}}
							</view>
							<view class="shop-score-detail">
								<view class="shop-score-label">
									服务评价
								</view>
								<view class="shop-score-star">
									<block v-for="i in 5" :key="i">
										<image src="../../../static/star.png" mode="" style="width: 24upx;height: 24upx;" v-if="i<=shop.service_score-1"></image>
										<image src="../../../static/star-line.png" mode="" style="width: 24upx;height: 24upx;" v-else></image>
									</block>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="staff-list">
			<view class="staff-item row" @click="showStaffPage(staff.id)" v-for="(staff,key) in shop.staffs" :key="key">
				<view class="staff-avatar">
					<image :src="staff.avatar?staff.avatar:'../../../static/logo.png'" mode="" class="staff-avatar-image"></image>
				</view>
				<view class="staff-info">
					<view class="staff-column" style="flex: 1;">
						<view class="staff-name">
							{{staff.nickname}}
						</view>
						<view class="staff-star">
							<block v-for="i in 5" :key="i">
								<image src="../../../static/star.png" mode="" style="width: 40upx;height: 40upx;" v-if="i<=staff.score-1"></image>
								<image src="../../../static/star-line.png" mode="" style="width: 40upx;height:40upx;" v-else></image>
							</block>
						</view>
					</view>
					<view class="staff-column">
						<view class="staff-count">
							已服务{{staff.service_count}}次
						</view>
						<view class="staff-order row" @click.stop="chooseService(staff.id)">
							立即预约
						</view>
					</view>
					
				</view>
				
			</view>
			
		</view>
		<view class="comment">
			<view class="comment-header">
				<view class="comment-title">
					用户评价
				</view>
				<view class="comment-count">
					查看全部（{{shop.comment_count}}条）
				</view>
				<uni-icon type="arrowright" color="grey"></uni-icon>
			</view>
			<view class="comment-list">
				
				<view class="comment-item" v-for="(comment,key) in shop.comments" :key="key">
					<view class="comment-time">
						{{comment.addtime}}
					</view>
					<view class="comment-user">
						<image :src="comment.avatar" mode="" class="comment-avatar"></image>
						<view class="comment-userinfo">
							<view class="">
								<text>{{comment.nickname}}</text>
							</view>
							<view class="comment-phone">
								{{comment.phone}}
							</view>
						</view>
					</view>
					<view class="comment-scores">
						<view class="comment-score">
							门店环境：
							<view class="comment-stars" style="margin: 0;">
								<block v-for="i in 5" :key="i">
									<image src="../../../static/star.png" mode="" style="width: 24upx;height: 24upx;" v-if="i<=comment.environment_score-1"></image>
									<image src="../../../static/star-line.png" mode="" style="width: 24upx;height:24upx;" v-else></image>
								</block>
							</view>
							/
							<view class="" style="margin-left: 10upx;width: 320upx;text-overflow: ellipsis;overflow: hidden;">
								{{comment.store_name}}
							</view>
						</view>
						
						<view class="comment-score">
							服务评分：
							<view class="comment-stars" style="margin: 0;">
								<block v-for="i in 5" :key="i">
									<image src="../../../static/star.png" mode="" style="width: 24upx;height: 24upx;" v-if="i<=comment.service_score-1"></image>
									<image src="../../../static/star-line.png" mode="" style="width: 24upx;height:24upx;" v-else></image>
								</block>
							</view>
							/
							<view class="" style="margin-left: 10upx;">
								{{comment.staff_name}}
							</view>
						</view>
					</view>
					<view class="comment-content">
						{{comment.content}}
					</view>
					<view class="comment-images">
						<image :src="image" mode="" class="comment-image" v-for="(image,i) in comment.image" :key="i"></image>
					</view>
					
				</view>
			</view>
		</view>
		<view class="recommend">
			<view class="recommend-tabs row">
				<view class="recommend-tab" :class="tabIndex==0?'active':''" @click="tabIndex=0">
					服务
				</view>
				<view class="recommend-tab" :class="tabIndex==1?'active':''" @click="tabIndex=1">
					卡包
				</view>
				<view class="recommend-tab" :class="tabIndex==2?'active':''" @click="tabIndex=2">
					产品
				</view>
			</view>
			<scroll-view class="recommend-scroll" scroll-x="true">
				<view class="recommend-row" v-show='tabIndex==0'>
					<view class="recommend-item" @click="showDetail('service',service.id)" v-for="(service,key) in shop.services" :key="key">
						<image class="item-image" :src="service.thumb" mode="aspectFill"></image>
						<view class="item-title">
							{{service.name}}
						</view>
						<view class="item-price">
							￥{{service.price}}
						</view>
					</view>
				</view>
				<view class="recommend-row" v-show='tabIndex==1'>
					<view class="recommend-item" @click="showDetail('card',card.id)" v-for="(card,key) in shop.cards" :key="key">
						<image class="item-image" :src="card.thumb" mode="aspectFill"></image>
						<view class="item-title">
							{{card.name}}
						</view>
						<view class="item-price">
							￥{{card.price}}
						</view>
					</view>
				</view>
				<view class="recommend-row" v-show='tabIndex==2'>
					<view class="recommend-item" @click="showDetail('product',product.id)" v-for="(product,key) in shop.products" :key="key">
						<image class="item-image" :src="product.thumb" mode="aspectFill"></image>
						<view class="item-title">
							{{product.name}}
						</view>
						<view class="item-price">
							￥{{product.price}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="height:100upx"></view>
		<view class="bottom">
			<button class="bottom-btn share-btn" @click="contract">
				<image class="bottom-icon" src="../../../static/store/contact.png"></image>
				<view class="bottom-text">
					联系门店
				</view>
			</button>
			<button class="bottom-btn share-btn" open-type="share">
				<image class="bottom-icon" src="../../../static/store/share.png"></image>
				<view class="bottom-text">
					分享
				</view>
			</button>
			<view class="buy-btn" @click="chooseService(0)">
				立即预约
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '../../../components/uni-icon.vue'
	export default { 
		data() {
			return {
				id:0,
				shop:{
					"name":"",
					"work_start":"",
					"work_end":"",
					"service_count":"",
					"distance":"",
					"address":"",
					"service_score":"5.0",
					"environment_score":"5.0",
					"comment_count":0,
				},
				tabIndex:0,
			};
		},
		onLoad:function(e){
			this.id=e.id;
			
		},
		onShow:function(e){
			this.getLocation();
		},
		components: {
			uniIcon
		},
		onShareAppMessage:function(res){
			console.log(JSON.stringify(res));
		},
		methods:{
			getLocation:function(){
				uni.showLoading({
					title:"加载中"
				})
				var that=this;
				uni.getLocation({
					type:"gcj02",
					complete:function(e){
						that.getShopInfo(e);
					},
					fail:function(){
						uni.hideLoading();
						uni.showModal({
							title:"位置信息获取失败",
							content:"请手动选择位置",
							confirmText:"手动选择",
							success:function(e){
								if(e.confirm){
									uni.chooseLocation({
										success:function(e){
											that.getShopInfo(e);
										}
									})
								}
							}
						})
					}
				})
			},
			getShopInfo:function(location){
				var that=this;
				that.ajax("/shop/info/",{
					token:uni.getStorageSync("token"),
					sence:uni.getStorageSync("sence"),
					id:this.id,
					latitude:location.latitude,
					longitude:location.longitude,
				},function(res){
					that.shop=res.data.data; 
				});
			},
			contract:function(){
				uni.makePhoneCall({
					phoneNumber:this.shop.phone
				})
			},
			showDetail:function(type,id){
				uni.navigateTo({
					url:"/pages/"+type+"/detail/detail?id="+id+"&shop_id="+this.shop.id,
				});
			},
			showStaffPage:function(id){
				uni.navigateTo({
					url:"/pages/staff/info/info?staff_id="+id+"&shop_id="+this.shop.id
				})
			},
			chooseService:function(staff_id){
				uni.navigateTo({
					url:"/pages/service/choose/choose?staff_id="+staff_id+"&shop_id="+this.shop.id
				})
			},
		}
	}
</script>

<style>
	.head{
		position: relative;
		padding:28upx;
		background: #ffffff;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	}
	.shop-banner{
		width:100%;
		border-radius: 24upx;
	}
	.shop-info-area{
		border-radius: 20upx;
		width: 100%;
	}
	.shop-info{
	}
	.shop-name{
		font-size: 32upx;
		color: #4B4B4B;
		font-weight: 600;
	}
	.shop-time{
		color: #4B4B4B;
		flex: 1;
		font-size: 28upx;
	}
	.shop-count{
		color: #ABABAB;
		font-size: 28upx;
	}
	.shop-location{
		color: #4B4B4B;
		flex: 1;
		font-size: 28upx;
	}
	.shop-distance{
		color: #FF7465;
		font-size: 22upx;
	}
	.shop-score{
		display: flex;
		flex-direction: row;
		background: #ffffff;
		align-items: center;
		padding: 0;
		margin-top: 48upx;
		
	}
	.shop-environment{
		flex: 1;
		display: flex;
		flex-direction: row;
		padding: 20upx;
		align-content: center;
		align-items: center;
		box-shadow:0px 2upx 20upx 0px rgba(43,159,133,0.14);
		border-radius:12upx;
	}
	.shop-service{
		flex: 1;
		display: flex;
		flex-direction: row;
		padding: 20upx;
		align-content: center;
		align-items: center;
		box-shadow:0px 2upx 20upx 0px rgba(43,159,133,0.14);
		border-radius:12upx;
	}
	.shop-score-number{
		font-size: 48upx;
		color:#FF7465;
		margin-right: 16upx;
	}
	.shop-score-detail{
		display: flex;
		flex-direction: column;
		align-content: center;
		padding:20upx 0;
	}
	.shop-score-label{
		font-size: 28upx;
		color:#4B4B4B;
		line-height: 28upx;
		
	}
	.shop-score-star{
		height: 24upx;
		display: flex;
	}
	.row{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.staff-list{
		margin-top: 32upx;
		padding: 20upx;
	}
	.staff-item{
		position: relative;
		margin-bottom: 75upx;
		padding:0 20upx;
	}
	.staff-avatar{
		position: relative;
		width: 160upx;
		height: 160upx;
		z-index: 100;
	}
	.staff-avatar-image{
		width: 160upx;
		height: 160upx;
		border-radius: 12upx;
	}
	.staff-info{
		display: flex;
		flex-direction: row;
		position: absolute;
		height: 182upx;
		left: 80upx;
		top: -24upx;
		right: 28upx;
		padding-left: 120upx;
		border-radius: 12upx;
		background: #ffffff;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		padding-right: 14upx;
		padding-bottom: 24upx;
	}
	.staff-column{
		display: flex;
		flex-direction: column;
		height: 100%;
		align-content: center;
		justify-content: center;
	}
	.staff-name{
		font-size: 28upx;
		color:#4B4B4B;
	}
	.staff-star{
		margin-top: 10upx;
		display: flex;
		height: 40upx;
	}
	.staff-count{
		font-size: 24upx;
		color: #ababab;
		margin-top: 50upx;
		text-align: right;
	}
	.staff-order{
		font-size: 24upx;
		color: #ffffff;
		background: #45AA8C;
		padding: 14upx 24upx;
		border-radius:8upx;
		margin-top: 46upx;
	}
	.comment{
		background: #ffffff;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	}
	.comment{
		background: #FFFFFF;
		padding:35upx 25upx;
	}
	.comment-header{
		display: flex;
		flex-direction: row;
	}
	.comment-title{
		color: #4B4B4B;
		font-size: 28upx;
		flex:1;
	}
	.comment-count{
		font-size: 24upx;
		padding: 2upx;
		color: #ABABAB;
		flex: 1;
		text-align: right;
	}
	.comment-item{
		padding:12upx 12upx 30upx 22upx;
		border-radius: 12upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		margin-top: 24upx;
	}
	.comment-user{
		display: flex;
		flex-direction: row;
	}
	.comment-avatar{
		width: 92upx;
		height: 92upx;
		border-radius: 50%;
	}
	.comment-userinfo{
		margin-left: 20upx;
		font-size: 28upx;
		color: #4B4B4B;
	}
	.comment-phone{
		font-size: 24upx;
		color: #8B8B8B;
	}
	.comment-stars{
		margin-left: 24upx;
		display: inline-block;
	}
	.comment-score{
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		color: #8B8B8B;
	}
	.comment-content{
		font-size: 24upx;
		margin:34upx 0;
	}
	.comment-scores{
		font-size: 25upx;
		margin:40upx 0;
	}
	.comment-image{
		margin-bottom: 10upx;
	}
	.comment-image{
		width: 160upx;
		height: 160upx;
		border-radius: 15upx;
		margin-right: 30upx;
	}
	.comment-time{
		color: #bfbfbf;
		font-size: 20upx;
		margin-top: 10upx;
		text-align: right;
	}
	.bottom{
		width: 96%;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		padding: 12upx 2%;
		border-top: 1upx solid #efefef;
		background: #FFFFFF;
		align-content: center;
		align-items: center;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		z-index:1000;
	}
	.bottom-btn{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
	}
	.bottom-icon{
		width: 46upx;
		height: 46upx;
		margin-top: 5upx;
		margin-bottom: 10upx;
	}
	.bottom-text{
		font-size: 22upx;
		color: #272727;
	}
	.buy-btn{
		width: 450upx;
		color: #ffffff;
		background: #45AA8C;
		text-align: center;
		border-radius: 10upx;
		padding:24upx 0;
	}
	.recommend{
		background: #ffffff;
		
	}
	.recommend-tabs{
		padding:20upx;
		
	}
	.recommend-tab{
		color: #080808;
		line-height:26upx ;
		font-size: 26upx;
		padding: 18upx 30upx;
	}
	.recommend-tab.active{
		color: #ffffff;
		background: #45AA8C;
		border-radius: 30upx;
	}
	.recommend-all{
		color: #adadad;
		font-size: 24upx;
	}
	.recommend-scroll {
		margin-bottom: 20upx;
	}

	.recommend-row {
		display: flex;
		flex-direction: row;
	}

	.recommend-item {
		margin-left: 20upx;
	}
	
	.recommend-label {
		display: inline-block;
		background: #ffe55c;
		border-radius: 10upx;
		border: 2upx solid #000000;
		font-size: 26upx;
		line-height: 26upx;
		padding: 10upx;
		margin-bottom: 30upx;
		margin-left: 25upx;
	}

	.item-image {
		border-radius: 10upx;
		width: 512upx;
		height: 300upx;
	}

	.item-title {
		font-size: 24upx;
		color: #6d6d6d;
		line-height: 24upx;
	}

	.item-price {
		color: #fc2e19;
		font-size: 26upx;
		font-weight: 600;
	}
	.share-btn{
		background: none;
		border:none;
		margin: 0;
		padding: 0;
		line-height: 1;
	}
	.share-btn:after{
		border:none;
	}
</style>
